<template>
    <el-modal>
      <el-form :model="formData" ref="form" label-width="80px" :inline="false">
        <el-form-item label="基本单位">
          <el-input v-model="formData.basicUnit" placeholder="请输入基本单位(小单位)"></el-input>
        </el-form-item>
  
        <el-form-item label="副单位">
          <div style="display: flex; align-items: center;">
            <el-input v-model="formData.otherUnit" placeholder="请输入副单位(大单位)" style="width: 48%;"></el-input>
            <span style="margin: 0 8px;">=</span>
            <el-input v-model="formData.ratio" placeholder="请输入比例" class="dw"></el-input>
            <span class="dw1">
              基本单位
            </span>
          </div>
        </el-form-item>
  
        <el-form-item label="副单位2" >
          <div style="display: flex; align-items: center;">
            <el-input v-model="formData.otherUnitTwo" placeholder="请输入副单位2(大单位)" style="width: 48%;"></el-input>
            <span style="margin: 0 8px;">=</span>
            <el-input v-model="formData.ratioTwo" placeholder="请输入比例2" class="dw"></el-input>
            <span class="dw1">基本单位</span>
          </div>
        </el-form-item>
  
        <el-form-item label="副单位3" >
          <div style="display: flex; align-items: center;">
            <el-input v-model="formData.otherUnitThree" placeholder="请输入副单位3(大单位)" style="width: 48%;"></el-input>
            <span style="margin: 0 8px;">=</span>
            <el-input v-model="formData.ratioThree" placeholder="请输入比例3" class="dw"></el-input>
            <span class="dw1">基本单位</span>
          </div>
        </el-form-item>
  
      </el-form>
  
      <div slot="footer" style="display: flex; justify-content: flex-end; margin-top: 10px; ">
        <el-button @click="close">关 闭</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-modal>
  </template>
  
  <script setup>
  import { ref, defineEmits } from 'vue'
  import reqeust from '@/api/request'
  import router from '@/router'
  let emits = defineEmits(['close'])
  let props = defineProps(['data'])
  let formData = ref({ ...props.data })
  let close = () => {
    emits('close')
  }
  
  let onSubmit =()=>{
      reqeust.post("/commodity/unit/update", formData.value,{
          headers:{
              'Content-Type':'application/json',
          },
          body: JSON.stringify(formData.value)
      }).then(resp=>{
          console.log(resp)
          if(resp.code == 200){
              router.push("/commodity/unit")
              emits('close')
          }
      })
  }
  </script>
  
  <style scoped>
  .el-form-item {
    margin-bottom: 16px;
  }
  
  .dw {
    width: 48%;
    position: relative;
  }
  
  .dw1 {
    position: absolute;
    right: 40%;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.65);
  }
  </style>
  